<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>软件管理中心</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 14px 0 rgba(0, 0, 0, 0.06)',
                        'card-hover': '0 6px 20px 0 rgba(0, 0, 0, 0.1)',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .transition-all-300 {
                @apply transition-all duration-300 ease-in-out;
            }
            .card-hover-effect {
                @apply hover:shadow-card-hover hover:-translate-y-1 transition-all-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen flex flex-col">
    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边栏 -->
        <aside id="sidebar" class="w-64 bg-white h-[calc(100vh)] shadow-sm flex-shrink-0 hidden md:block transition-all-300">
            <div class="p-5 border-b border-neutral-200">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white">
                        <i class="fa fa-th-large text-xl"></i>
                    </div>
                    <h1 class="text-xl font-bold text-neutral-700">软件管理中心</h1>
                </div>
            </div>
            
            <nav class="py-4">
                <ul>
                    <li>
                        <a href="#home" class="sidebar-item-active flex items-center px-5 py-4 text-neutral-700 transition-all-300">
                            <i class="fa fa-home w-6 text-center"></i>
                            <span class="ml-3">首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="#marketplace" class="flex items-center px-5 py-4 text-neutral-500 transition-all-300 hover:bg-neutral-100">
                            <i class="fa fa-shopping-bag w-6 text-center"></i>
                            <span class="ml-3">软件广场</span>
                        </a>
                    </li>
                    <li>
                        <a href="#customize" class="flex items-center px-5 py-4 text-neutral-500 transition-all-300 hover:bg-neutral-100">
                            <i class="fa fa-wrench w-6 text-center"></i>
                            <span class="ml-3">软件定制</span>
                        </a>
                    </li>
                    <li>
                        <a href="#settings" class="flex items-center px-5 py-4 text-neutral-500 transition-all-300 hover:bg-neutral-100">
                            <i class="fa fa-cog w-6 text-center"></i>
                            <span class="ml-3">系统设置</span>
                        </a>
                    </li>
                    <li>
                        <a href="#profile" class="flex items-center px-5 py-4 text-neutral-500 transition-all-300 hover:bg-neutral-100">
                            <i class="fa fa-user w-6 text-center"></i>
                            <span class="ml-3">我的</span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <!-- <div class="absolute bottom-0 w-full p-4 border-t border-neutral-200">
                <div class="bg-neutral-100 rounded-lg p-4">
                    <p class="text-sm text-neutral-500 mb-3">版本信息</p>
                    <p class="text-xs text-neutral-400">v1.0.0 正式版</p>
                </div>
            </div> -->
        </aside>
        
        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto bg-neutral-100">
            <!-- 顶部导航 -->
            <header class="bg-white shadow-sm sticky top-0 z-10">
                <div class="flex justify-between items-center px-6 py-4">
                    <div class="flex items-center md:hidden">
                        <button id="sidebarToggle" class="text-neutral-500 hover:text-primary transition-all-300">
                            <i class="fa fa-bars text-xl"></i>
                        </button>
                    </div>
                    
                    <div class="flex-1 max-w-md mx-4 md:mx-8">
                        <div class="relative">
                            <input type="text" placeholder="搜索软件..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                        </div>
                    </div>
                    
                    <div class="flex items-center space-x-6">
                        <button class="text-neutral-500 hover:text-primary transition-all-300 relative">
                            <i class="fa fa-bell text-xl"></i>
                            <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">3</span>
                        </button>
                        
                        <div class="flex items-center space-x-3">
                            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-9 h-9 rounded-full object-cover border-2 border-white shadow-sm">
                            <span class="text-sm font-medium hidden md:inline-block">张小明</span>
                        </div>
                    </div>
                </div>
            </header>
            
            <!-- 页面内容 -->
            <div class="p-6 md:p-8">
                <!-- 首页内容 -->
                <section id="home-content" class="space-y-8">
                    <div class="flex justify-between items-center">
                        <div>
                            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700">欢迎回来，张小明</h2>
                            <p class="text-neutral-500 mt-1">今天是星期三，有 3 个新的软件更新</p>
                        </div>
                        <button class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg transition-all-300 flex items-center">
                            <i class="fa fa-plus mr-2"></i>
                            <span>添加软件</span>
                        </button>
                    </div>
                    
                    <!-- 已购/收藏软件 -->
                    <div>
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-semibold text-neutral-700">已购软件</h3>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm transition-all-300">查看全部</a>
                        </div>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
                            <!-- 软件卡片 1 -->
                            <div class="bg-white rounded-xl shadow-card p-5 card-hover-effect">
                                <div class="flex justify-between items-start mb-4">
                                    <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center text-primary">
                                        <i class="fa fa-file-text-o text-xl"></i>
                                    </div>
                                    <button class="text-neutral-400 hover:text-red-500 transition-all-300">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                </div>
                                <h4 class="font-medium text-neutral-700 mb-1">文档编辑器</h4>
                                <p class="text-sm text-neutral-500 mb-4">专业文档处理工具</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">已更新</span>
                                    <button class="text-sm bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1.5 rounded-lg transition-all-300">
                                        启动
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 软件卡片 2 -->
                            <div class="bg-white rounded-xl shadow-card p-5 card-hover-effect">
                                <div class="flex justify-between items-start mb-4">
                                    <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600">
                                        <i class="fa fa-paint-brush text-xl"></i>
                                    </div>
                                    <button class="text-red-500 hover:text-red-600 transition-all-300">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                </div>
                                <h4 class="font-medium text-neutral-700 mb-1">图像设计</h4>
                                <p class="text-sm text-neutral-500 mb-4">专业图像编辑软件</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded-full">可更新</span>
                                    <button class="text-sm bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1.5 rounded-lg transition-all-300">
                                        启动
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 软件卡片 3 -->
                            <div class="bg-white rounded-xl shadow-card p-5 card-hover-effect">
                                <div class="flex justify-between items-start mb-4">
                                    <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center text-green-600">
                                        <i class="fa fa-code text-xl"></i>
                                    </div>
                                    <button class="text-neutral-400 hover:text-red-500 transition-all-300">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                </div>
                                <h4 class="font-medium text-neutral-700 mb-1">代码编辑器</h4>
                                <p class="text-sm text-neutral-500 mb-4">程序员必备工具</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full">最新版</span>
                                    <button class="text-sm bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1.5 rounded-lg transition-all-300">
                                        启动
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 软件卡片 4 -->
                            <div class="bg-white rounded-xl shadow-card p-5 card-hover-effect">
                                <div class="flex justify-between items-start mb-4">
                                    <div class="w-12 h-12 rounded-lg bg-yellow-100 flex items-center justify-center text-yellow-600">
                                        <i class="fa fa-bar-chart text-xl"></i>
                                    </div>
                                    <button class="text-neutral-400 hover:text-red-500 transition-all-300">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                </div>
                                <h4 class="font-medium text-neutral-700 mb-1">数据分析</h4>
                                <p class="text-sm text-neutral-500 mb-4">数据可视化工具</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full">最新版</span>
                                    <button class="text-sm bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1.5 rounded-lg transition-all-300">
                                        启动
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 推荐软件 -->
                    <div>
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-semibold text-neutral-700">为您推荐</h3>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm transition-all-300">更多推荐</a>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div class="bg-white rounded-xl shadow-card p-5 flex items-center space-x-5 card-hover-effect">
                                <div class="w-16 h-16 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600 flex-shrink-0">
                                    <i class="fa fa-video-camera text-2xl"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h4 class="font-medium text-neutral-700">视频编辑大师</h4>
                                            <p class="text-sm text-neutral-500 mt-1">专业视频剪辑与制作</p>
                                        </div>
                                        <span class="text-sm font-medium text-primary">¥199</span>
                                    </div>
                                    <div class="flex items-center mt-3 space-x-4">
                                        <div class="flex items-center text-yellow-500 text-sm">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star-half-o"></i>
                                            <span class="text-neutral-500 ml-1">4.5</span>
                                        </div>
                                        <span class="text-xs text-neutral-500">1,243人已购</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl shadow-card p-5 flex items-center space-x-5 card-hover-effect">
                                <div class="w-16 h-16 rounded-lg bg-red-100 flex items-center justify-center text-red-600 flex-shrink-0">
                                    <i class="fa fa-music text-2xl"></i>
                                </div>
                                <div class="flex-1">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h4 class="font-medium text-neutral-700">音乐创作工坊</h4>
                                            <p class="text-sm text-neutral-500 mt-1">音乐制作与编辑工具</p>
                                        </div>
                                        <span class="text-sm font-medium text-primary">¥299</span>
                                    </div>
                                    <div class="flex items-center mt-3 space-x-4">
                                        <div class="flex items-center text-yellow-500 text-sm">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star-o"></i>
                                            <span class="text-neutral-500 ml-1">4.0</span>
                                        </div>
                                        <span class="text-xs text-neutral-500">867人已购</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 最近活动 -->
                    <div>
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-semibold text-neutral-700">最近活动</h3>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm transition-all-300">查看全部</a>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-card p-5">
                            <div class="flex items-center border-b border-neutral-200 pb-4 mb-4">
                                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-3">
                                    <i class="fa fa-fire"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-700">年度会员特惠</h4>
                                    <p class="text-sm text-neutral-500">购买年度会员，所有软件享8折优惠</p>
                                </div>
                                <span class="ml-auto bg-red-100 text-red-600 text-xs px-3 py-1 rounded-full">进行中</span>
                            </div>
                            
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
                                    <i class="fa fa-gift"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-700">新用户专享礼包</h4>
                                    <p class="text-sm text-neutral-500">注册即可领取3款精选软件</p>
                                </div>
                                <span class="ml-auto bg-green-100 text-green-600 text-xs px-3 py-1 rounded-full">进行中</span>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- 软件广场内容 (默认隐藏) -->
                <section id="marketplace-content" class="space-y-8 hidden">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700">软件广场</h2>
                        <p class="text-neutral-500 mt-1">发现并获取您需要的软件</p>
                    </div>
                    
                    <!-- 筛选器 -->
                    <div class="bg-white rounded-xl shadow-card p-5">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-5">
                            <div>
                                <label class="block text-sm font-medium text-neutral-500 mb-2">分类</label>
                                <select class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                                    <option value="">全部分类</option>
                                    <option value="design">设计工具</option>
                                    <option value="development">开发工具</option>
                                    <option value="office">办公软件</option>
                                    <option value="media">媒体工具</option>
                                    <option value="utility">实用工具</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-neutral-500 mb-2">价格</label>
                                <select class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                                    <option value="">全部价格</option>
                                    <option value="free">免费</option>
                                    <option value="paid">付费</option>
                                    <option value="in-app">含内购</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-neutral-500 mb-2">评分</label>
                                <select class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                                    <option value="">全部评分</option>
                                    <option value="4+">4星及以上</option>
                                    <option value="3+">3星及以上</option>
                                    <option value="2+">2星及以上</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-neutral-500 mb-2">排序方式</label>
                                <select class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                                    <option value="recommended">推荐</option>
                                    <option value="popular">热门</option>
                                    <option value="newest">最新</option>
                                    <option value="price-asc">价格从低到高</option>
                                    <option value="price-desc">价格从高到低</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 软件列表 -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- 软件卡片 1 -->
                        <div class="bg-white rounded-xl shadow-card overflow-hidden card-hover-effect">
                            <div class="h-40 bg-neutral-100 relative">
                                <img src="https://picsum.photos/id/0/400/200" alt="3D建模软件" class="w-full h-full object-cover">
                                <span class="absolute top-3 right-3 bg-primary text-white text-xs px-2 py-1 rounded-full">付费</span>
                            </div>
                            <div class="p-5">
                                <h4 class="font-medium text-neutral-700">3D建模大师</h4>
                                <p class="text-sm text-neutral-500 mt-1 line-clamp-2">专业3D建模与渲染软件，支持多种格式导出</p>
                                
                                <div class="flex items-center mt-3">
                                    <div class="flex items-center text-yellow-500 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                        <span class="text-neutral-500 ml-1">4.7 (328)</span>
                                    </div>
                                </div>
                                
                                <div class="mt-4 flex justify-between items-center">
                                    <span class="font-medium text-primary">¥399</span>
                                    <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-all-300">
                                        购买
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 软件卡片 2 -->
                        <div class="bg-white rounded-xl shadow-card overflow-hidden card-hover-effect">
                            <div class="h-40 bg-neutral-100 relative">
                                <img src="https://picsum.photos/id/160/400/200" alt="笔记软件" class="w-full h-full object-cover">
                                <span class="absolute top-3 right-3 bg-green-500 text-white text-xs px-2 py-1 rounded-full">免费</span>
                            </div>
                            <div class="p-5">
                                <h4 class="font-medium text-neutral-700">智慧笔记</h4>
                                <p class="text-sm text-neutral-500 mt-1 line-clamp-2">多功能笔记软件，支持文本、图片、语音记录与同步</p>
                                
                                <div class="flex items-center mt-3">
                                    <div class="flex items-center text-yellow-500 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="text-neutral-500 ml-1">4.2 (1,542)</span>
                                    </div>
                                </div>
                                
                                <div class="mt-4 flex justify-between items-center">
                                    <span class="font-medium text-green-500">免费</span>
                                    <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-all-300">
                                        下载
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 软件卡片 3 -->
                        <div class="bg-white rounded-xl shadow-card overflow-hidden card-hover-effect">
                            <div class="h-40 bg-neutral-100 relative">
                                <img src="https://picsum.photos/id/180/400/200" alt="翻译软件" class="w-full h-full object-cover">
                                <span class="absolute top-3 right-3 bg-orange-500 text-white text-xs px-2 py-1 rounded-full">内购</span>
                            </div>
                            <div class="p-5">
                                <h4 class="font-medium text-neutral-700">全球翻译官</h4>
                                <p class="text-sm text-neutral-500 mt-1 line-clamp-2">支持100+语言实时翻译，包含专业词典与语音翻译</p>
                                
                                <div class="flex items-center mt-3">
                                    <div class="flex items-center text-yellow-500 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <span class="text-neutral-500 ml-1">4.9 (2,103)</span>
                                    </div>
                                </div>
                                
                                <div class="mt-4 flex justify-between items-center">
                                    <span class="font-medium text-orange-500">基础免费</span>
                                    <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-all-300">
                                        获取
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 软件卡片 4 -->
                        <div class="bg-white rounded-xl shadow-card overflow-hidden card-hover-effect">
                            <div class="h-40 bg-neutral-100 relative">
                                <img src="https://picsum.photos/id/96/400/200" alt="数据恢复软件" class="w-full h-full object-cover">
                                <span class="absolute top-3 right-3 bg-primary text-white text-xs px-2 py-1 rounded-full">付费</span>
                            </div>
                            <div class="p-5">
                                <h4 class="font-medium text-neutral-700">数据恢复专家</h4>
                                <p class="text-sm text-neutral-500 mt-1 line-clamp-2">专业数据恢复工具，支持硬盘、U盘、存储卡等设备</p>
                                
                                <div class="flex items-center mt-3">
                                    <div class="flex items-center text-yellow-500 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="text-neutral-500 ml-1">3.7 (456)</span>
                                    </div>
                                </div>
                                
                                <div class="mt-4 flex justify-between items-center">
                                    <span class="font-medium text-primary">¥199</span>
                                    <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-all-300">
                                        购买
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 软件卡片 5 -->
                        <div class="bg-white rounded-xl shadow-card overflow-hidden card-hover-effect">
                            <div class="h-40 bg-neutral-100 relative">
                                <img src="https://picsum.photos/id/2/400/200" alt="视频转换软件" class="w-full h-full object-cover">
                                <span class="absolute top-3 right-3 bg-green-500 text-white text-xs px-2 py-1 rounded-full">免费</span>
                            </div>
                            <div class="p-5">
                                <h4 class="font-medium text-neutral-700">格式转换大师</h4>
                                <p class="text-sm text-neutral-500 mt-1 line-clamp-2">支持多种音视频格式转换，简单高效</p>
                                
                                <div class="flex items-center mt-3">
                                    <div class="flex items-center text-yellow-500 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="text-neutral-500 ml-1">4.1 (987)</span>
                                    </div>
                                </div>
                                
                                <div class="mt-4 flex justify-between items-center">
                                    <span class="font-medium text-green-500">免费</span>
                                    <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-all-300">
                                        下载
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 软件卡片 6 -->
                        <div class="bg-white rounded-xl shadow-card overflow-hidden card-hover-effect">
                            <div class="h-40 bg-neutral-100 relative">
                                <img src="https://picsum.photos/id/119/400/200" alt="安全防护软件" class="w-full h-full object-cover">
                                <span class="absolute top-3 right-3 bg-primary text-white text-xs px-2 py-1 rounded-full">付费</span>
                            </div>
                            <div class="p-5">
                                <h4 class="font-medium text-neutral-700">安全防护中心</h4>
                                <p class="text-sm text-neutral-500 mt-1 line-clamp-2">全方位电脑安全防护，包含杀毒、防火墙等功能</p>
                                
                                <div class="flex items-center mt-3">
                                    <div class="flex items-center text-yellow-500 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                        <span class="text-neutral-500 ml-1">4.6 (2,345)</span>
                                    </div>
                                </div>
                                
                                <div class="mt-4 flex justify-between items-center">
                                    <span class="font-medium text-primary">¥299/年</span>
                                    <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-all-300">
                                        购买
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="flex justify-center mt-8">
                        <nav class="flex items-center space-x-1">
                            <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-neutral-200 text-neutral-500 hover:border-primary hover:text-primary transition-all-300">
                                <i class="fa fa-chevron-left text-sm"></i>
                            </button>
                            <button class="w-9 h-9 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
                            <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-neutral-200 text-neutral-700 hover:border-primary hover:text-primary transition-all-300">2</button>
                            <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-neutral-200 text-neutral-700 hover:border-primary hover:text-primary transition-all-300">3</button>
                            <span class="text-neutral-500">...</span>
                            <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-neutral-200 text-neutral-700 hover:border-primary hover:text-primary transition-all-300">10</button>
                            <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-neutral-200 text-neutral-500 hover:border-primary hover:text-primary transition-all-300">
                                <i class="fa fa-chevron-right text-sm"></i>
                            </button>
                        </nav>
                    </div>
                </section>
                
                <!-- 软件定制内容 (默认隐藏) -->
                <section id="customize-content" class="space-y-8 hidden">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700">软件定制</h2>
                        <p class="text-neutral-500 mt-1">提交您的软件定制需求，获取专属解决方案</p>
                    </div>
                    
                    <!-- 新建定制需求 -->
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <h3 class="text-lg font-semibold text-neutral-700 mb-4">创建定制需求</h3>
                        
                        <form class="space-y-5">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                <div>
                                    <label class="block text-sm font-medium text-neutral-500 mb-2">需求标题</label>
                                    <input type="text" placeholder="请输入您的定制需求标题" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-neutral-500 mb-2">定制类型</label>
                                    <select class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                                        <option value="">请选择定制类型</option>
                                        <option value="desktop">桌面软件</option>
                                        <option value="mobile">移动应用</option>
                                        <option value="web">网站系统</option>
                                        <option value="plugin">插件工具</option>
                                        <option value="other">其他类型</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-neutral-500 mb-2">详细需求描述</label>
                                <textarea rows="5" placeholder="请详细描述您的定制需求，包括功能、界面风格、技术要求等..." class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300"></textarea>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-neutral-500 mb-2">上传参考资料（可选）</label>
                                <div class="border-2 border-dashed border-neutral-200 rounded-lg p-6 text-center hover:border-primary transition-all-300 cursor-pointer">
                                    <input type="file" class="hidden" multiple>
                                    <i class="fa fa-cloud-upload text-2xl text-neutral-400 mb-2"></i>
                                    <p class="text-sm text-neutral-500">点击或拖拽文件至此处上传</p>
                                    <p class="text-xs text-neutral-400 mt-1">支持 PNG、JPG、PDF、DOC 等格式，最大 10MB</p>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                <div>
                                    <label class="block text-sm font-medium text-neutral-500 mb-2">预算范围</label>
                                    <select class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                                        <option value="">请选择预算范围</option>
                                        <option value="0-5000">5000元以下</option>
                                        <option value="5000-10000">5000-10000元</option>
                                        <option value="10000-30000">10000-30000元</option>
                                        <option value="30000-50000">30000-50000元</option>
                                        <option value="50000+">50000元以上</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-neutral-500 mb-2">期望完成时间</label>
                                    <input type="date" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                                </div>
                            </div>
                            
                            <div class="flex justify-end">
                                <button type="button" class="mr-3 px-6 py-2.5 border border-neutral-200 rounded-lg text-neutral-700 hover:bg-neutral-50 transition-all-300">
                                    保存草稿
                                </button>
                                <button type="submit" class="px-6 py-2.5 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all-300">
                                    提交需求
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 我的定制单 -->
                    <div>
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-semibold text-neutral-700">我的定制单</h3>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm transition-all-300">查看全部</a>
                        </div>
                        
                        <div class="space-y-5">
                            <!-- 定制单卡片 1 -->
                            <div class="bg-white rounded-xl shadow-card overflow-hidden card-hover-effect">
                                <div class="p-5 border-b border-neutral-200">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h4 class="font-medium text-neutral-700">企业内部管理系统开发</h4>
                                            <p class="text-sm text-neutral-500 mt-1">提交于 2023-06-15</p>
                                        </div>
                                        <span class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded-full">沟通中</span>
                                    </div>
                                </div>
                                
                                <div class="p-5">
                                    <div class="flex flex-wrap gap-4 mb-4">
                                        <div class="flex items-center">
                                            <span class="text-xs text-neutral-500 mr-2">类型：</span>
                                            <span class="text-sm text-neutral-700">网站系统</span>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="text-xs text-neutral-500 mr-2">预算：</span>
                                            <span class="text-sm text-neutral-700">10000-30000元</span>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="text-xs text-neutral-500 mr-2">期望完成：</span>
                                            <span class="text-sm text-neutral-700">2023-08-30</span>
                                        </div>
                                    </div>
                                    
                                    <p class="text-sm text-neutral-600 line-clamp-2 mb-4">需要开发一套企业内部管理系统，包含员工管理、考勤管理、项目管理等模块，要求界面简洁易用，支持数据导出...</p>
                                    
                                    <div class="flex justify-between items-center">
                                        <div class="flex items-center">
                                            <span class="text-xs text-neutral-500">最新回复：</span>
                                            <span class="text-sm text-neutral-700 ml-1">技术顾问 10分钟前</span>
                                        </div>
                                        <button class="text-primary hover:text-primary/80 text-sm transition-all-300 flex items-center">
                                            查看详情 <i class="fa fa-chevron-right text-xs ml-1"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 定制单卡片 2 -->
                            <div class="bg-white rounded-xl shadow-card overflow-hidden card-hover-effect">
                                <div class="p-5 border-b border-neutral-200">
                                    <div class="flex justify-between items-start">
                                        <div>
                                            <h4 class="font-medium text-neutral-700">个人财务管理软件</h4>
                                            <p class="text-sm text-neutral-500 mt-1">提交于 2023-06-10</p>
                                        </div>
                                        <span class="bg-green-100 text-green-600 text-xs px-3 py-1 rounded-full">已接单</span>
                                    </div>
                                </div>
                                
                                <div class="p-5">
                                    <div class="flex flex-wrap gap-4 mb-4">
                                        <div class="flex items-center">
                                            <span class="text-xs text-neutral-500 mr-2">类型：</span>
                                            <span class="text-sm text-neutral-700">桌面软件</span>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="text-xs text-neutral-500 mr-2">预算：</span>
                                            <span class="text-sm text-neutral-700">5000-10000元</span>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="text-xs text-neutral-500 mr-2">期望完成：</span>
                                            <span class="text-sm text-neutral-700">2023-07-30</span>
                                        </div>
                                    </div>
                                    
                                    <p class="text-sm text-neutral-600 line-clamp-2 mb-4">需要一款个人财务管理软件，能记录收支情况，生成月度报表，支持多账户管理，最好有预算提醒功能...</p>
                                    
                                    <div class="flex justify-between items-center">
                                        <div class="flex items-center">
                                            <span class="text-xs text-neutral-500">最新回复：</span>
                                            <span class="text-sm text-neutral-700 ml-1">开发工程师 1天前</span>
                                        </div>
                                        <button class="text-primary hover:text-primary/80 text-sm transition-all-300 flex items-center">
                                            查看详情 <i class="fa fa-chevron-right text-xs ml-1"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- 系统设置内容 (默认隐藏) -->
                <section id="settings-content" class="space-y-8 hidden">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700">系统设置</h2>
                        <p class="text-neutral-500 mt-1">自定义您的软件管理中心</p>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <div class="flex flex-col md:flex-row">
                            <!-- 设置导航 -->
                            <div class="md:w-1/4 mb-6 md:mb-0 md:pr-6 border-b md:border-b-0 md:border-r border-neutral-200">
                                <ul class="space-y-1">
                                    <li>
                                        <button class="w-full text-left px-4 py-3 bg-primary/10 text-primary rounded-lg font-medium transition-all-300">
                                            基本设置
                                        </button>
                                    </li>
                                    <li>
                                        <button class="w-full text-left px-4 py-3 text-neutral-600 hover:bg-neutral-100 rounded-lg transition-all-300">
                                            通知设置
                                        </button>
                                    </li>
                                    <li>
                                        <button class="w-full text-left px-4 py-3 text-neutral-600 hover:bg-neutral-100 rounded-lg transition-all-300">
                                            下载设置
                                        </button>
                                    </li>
                                    <li>
                                        <button class="w-full text-left px-4 py-3 text-neutral-600 hover:bg-neutral-100 rounded-lg transition-all-300">
                                            账户安全
                                        </button>
                                    </li>
                                    <li>
                                        <button class="w-full text-left px-4 py-3 text-neutral-600 hover:bg-neutral-100 rounded-lg transition-all-300">
                                            关于我们
                                        </button>
                                    </li>
                                </ul>
                            </div>
                            
                            <!-- 设置内容 -->
                            <div class="md:w-3/4 md:pl-6">
                                <h3 class="text-lg font-semibold text-neutral-700 mb-6">基本设置</h3>
                                
                                <div class="space-y-6">
                                    <div>
                                        <label class="block text-sm font-medium text-neutral-500 mb-2">界面主题</label>
                                        <div class="flex space-x-4">
                                            <label class="flex items-center cursor-pointer">
                                                <input type="radio" name="theme" checked class="hidden peer">
                                                <div class="w-12 h-12 rounded-lg bg-white border-2 border-neutral-200 flex items-center justify-center peer-checked:border-primary peer-checked:bg-primary/5 transition-all-300">
                                                    <i class="fa fa-sun-o text-yellow-500"></i>
                                                </div>
                                                <span class="ml-2 text-sm text-neutral-700">浅色</span>
                                            </label>
                                            
                                            <label class="flex items-center cursor-pointer">
                                                <input type="radio" name="theme" class="hidden peer">
                                                <div class="w-12 h-12 rounded-lg bg-neutral-700 border-2 border-transparent flex items-center justify-center peer-checked:border-primary transition-all-300">
                                                    <i class="fa fa-moon-o text-white"></i>
                                                </div>
                                                <span class="ml-2 text-sm text-neutral-700">深色</span>
                                            </label>
                                            
                                            <label class="flex items-center cursor-pointer">
                                                <input type="radio" name="theme" class="hidden peer">
                                                <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-blue-500 to-indigo-600 border-2 border-transparent flex items-center justify-center peer-checked:border-primary transition-all-300">
                                                    <i class="fa fa-adjust text-white"></i>
                                                </div>
                                                <span class="ml-2 text-sm text-neutral-700">跟随系统</span>
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="border-t border-neutral-200 pt-6">
                                        <h4 class="text-base font-medium text-neutral-700 mb-4">启动设置</h4>
                                        
                                        <div class="space-y-4">
                                            <label class="flex items-center justify-between">
                                                <div>
                                                    <span class="text-sm font-medium text-neutral-700">开机自动启动</span>
                                                    <p class="text-xs text-neutral-500 mt-0.5">软件管理中心随系统自动启动</p>
                                                </div>
                                                <div class="relative inline-block w-10 h-5">
                                                    <input type="checkbox" class="opacity-0 w-0 h-0 peer">
                                                    <span class="absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-neutral-300 rounded-full peer-checked:bg-primary transition-all-300"></span>
                                                    <span class="absolute cursor-pointer top-1 left-1 w-3 h-3 bg-white rounded-full transition-all-300 peer-checked:translate-x-5"></span>
                                                </div>
                                            </label>
                                            
                                            <label class="flex items-center justify-between">
                                                <div>
                                                    <span class="text-sm font-medium text-neutral-700">启动时显示首页</span>
                                                    <p class="text-xs text-neutral-500 mt-0.5">打开软件时默认显示首页内容</p>
                                                </div>
                                                <div class="relative inline-block w-10 h-5">
                                                    <input type="checkbox" checked class="opacity-0 w-0 h-0 peer">
                                                    <span class="absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-neutral-300 rounded-full peer-checked:bg-primary transition-all-300"></span>
                                                    <span class="absolute cursor-pointer top-1 left-1 w-3 h-3 bg-white rounded-full transition-all-300 peer-checked:translate-x-5"></span>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="border-t border-neutral-200 pt-6">
                                        <h4 class="text-base font-medium text-neutral-700 mb-4">缓存设置</h4>
                                        
                                        <div class="flex items-center justify-between mb-4">
                                            <div>
                                                <span class="text-sm font-medium text-neutral-700">缓存大小</span>
                                                <p class="text-xs text-neutral-500 mt-0.5">当前缓存占用空间</p>
                                            </div>
                                            <span class="text-sm text-neutral-700">128 MB</span>
                                        </div>
                                        
                                        <button class="w-full py-2.5 border border-neutral-200 rounded-lg text-neutral-700 hover:bg-neutral-50 transition-all-300">
                                            清理缓存
                                        </button>
                                    </div>
                                    
                                    <div class="border-t border-neutral-200 pt-6">
                                        <h4 class="text-base font-medium text-neutral-700 mb-4">语言设置</h4>
                                        
                                        <select class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all-300">
                                            <option value="zh-CN" selected>简体中文</option>
                                            <option value="zh-TW">繁体中文</option>
                                            <option value="en-US">English (US)</option>
                                            <option value="ja-JP">日本語</option>
                                            <option value="ko-KR">한국어</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="mt-8 flex justify-end">
                                    <button class="mr-3 px-6 py-2.5 border border-neutral-200 rounded-lg text-neutral-700 hover:bg-neutral-50 transition-all-300">
                                        取消
                                    </button>
                                    <button class="px-6 py-2.5 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all-300">
                                        保存设置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- 个人中心内容 (默认隐藏) -->
                <section id="profile-content" class="space-y-8 hidden">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700">个人中心</h2>
                        <p class="text-neutral-500 mt-1">管理您的账户和个性化设置</p>
                    </div>
                    
                    <!-- 个人信息 -->
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <div class="flex flex-col md:flex-row items-start md:items-center">
                            <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-sm mb-6 md:mb-0 md:mr-6">
                            
                            <div class="flex-1 mb-6 md:mb-0">
                                <div class="flex flex-col sm:flex-row sm:items-center justify-between">
                                    <div>
                                        <h3 class="text-xl font-semibold text-neutral-700">张小明</h3>
                                        <p class="text-neutral-500 mt-1">普通会员 | 会员有效期至 2023-12-31</p>
                                    </div>
                                    <button class="mt-3 sm:mt-0 px-5 py-2 bg-primary/10 hover:bg-primary/20 text-primary rounded-lg transition-all-300 text-sm">
                                        升级会员
                                    </button>
                                </div>
                                
                                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-6">
                                    <div class="text-center">
                                        <p class="text-2xl font-bold text-neutral-700">12</p>
                                        <p class="text-xs text-neutral-500 mt-1">已购软件</p>
                                    </div>
                                    <div class="text-center">
                                        <p class="text-2xl font-bold text-neutral-700">5</p>
                                        <p class="text-xs text-neutral-500 mt-1">定制需求</p>
                                    </div>
                                    <div class="text-center">
                                        <p class="text-2xl font-bold text-neutral-700">32</p>
                                        <p class="text-xs text-neutral-500 mt-1">收藏软件</p>
                                    </div>
                                    <div class="text-center">
                                        <p class="text-2xl font-bold text-neutral-700">86</p>
                                        <p class="text-xs text-neutral-500 mt-1">积分</p>
                                    </div>
                                </div>
                            </div>
                            
                            <button class="w-full md:w-auto px-5 py-2 border border-neutral-200 rounded-lg text-neutral-700 hover:bg-neutral-50 transition-all-300 text-sm">
                                编辑资料
                            </button>
                        </div>
                    </div>
                    
                    <!-- 账户安全 -->
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <h3 class="text-lg font-semibold text-neutral-700 mb-6">账户安全</h3>
                        
                        <div class="space-y-6">
                            <div class="flex items-center justify-between pb-6 border-b border-neutral-200">
                                <div>
                                    <h4 class="text-base font-medium text-neutral-700">手机号码</h4>
                                    <p class="text-sm text-neutral-500 mt-1">用于登录和找回密码</p>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-neutral-700 mr-4">138****5678</span>
                                    <button class="text-primary hover:text-primary/80 text-sm transition-all-300">
                                        修改
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between pb-6 border-b border-neutral-200">
                                <div>
                                    <h4 class="text-base font-medium text-neutral-700">电子邮箱</h4>
                                    <p class="text-sm text-neutral-500 mt-1">用于接收账单和通知</p>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-neutral-700 mr-4">zh***@example.com</span>
                                    <button class="text-primary hover:text-primary/80 text-sm transition-all-300">
                                        修改
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between pb-6 border-b border-neutral-200">
                                <div>
                                    <h4 class="text-base font-medium text-neutral-700">登录密码</h4>
                                    <p class="text-sm text-neutral-500 mt-1">上次修改于 30 天前</p>
                                </div>
                                <button class="text-primary hover:text-primary/80 text-sm transition-all-300">
                                    修改
                                </button>
                            </div>
                            
                            <div class="flex items-center justify-between">
                                <div>
                                    <h4 class="text-base font-medium text-neutral-700">两步验证</h4>
                                    <p class="text-sm text-neutral-500 mt-1">开启后登录更安全</p>
                                </div>
                                <div class="relative inline-block w-10 h-5">
                                    <input type="checkbox" class="opacity-0 w-0 h-0 peer">
                                    <span class="absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-neutral-300 rounded-full peer-checked:bg-primary transition-all-300"></span>
                                    <span class="absolute cursor-pointer top-1 left-1 w-3 h-3 bg-white rounded-full transition-all-300 peer-checked:translate-x-5"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 消费记录 -->
                    <div>
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-semibold text-neutral-700">消费记录</h3>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm transition-all-300">查看全部</a>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-card overflow-hidden">
                            <div class="overflow-x-auto">
                                <table class="w-full">
                                    <thead>
                                        <tr class="bg-neutral-50">
                                            <th class="text-left px-6 py-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">订单号</th>
                                            <th class="text-left px-6 py-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">商品</th>
                                            <th class="text-left px-6 py-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">金额</th>
                                            <th class="text-left px-6 py-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">日期</th>
                                            <th class="text-left px-6 py-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">状态</th>
                                            <th class="text-right px-6 py-4 text-xs font-medium text-neutral-500 uppercase tracking-wider">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-neutral-200">
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">#ORD20230615001</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">3D建模大师</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">¥399.00</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">2023-06-15</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-600">已完成</span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                                                <button class="text-primary hover:text-primary/80 transition-all-300">详情</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">#ORD20230610002</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">安全防护中心</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">¥299.00</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">2023-06-10</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-600">已完成</span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                                                <button class="text-primary hover:text-primary/80 transition-all-300">详情</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">#ORD20230528003</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">企业内部管理系统开发</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">¥15000.00</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-700">2023-05-28</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-600">处理中</span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                                                <button class="text-primary hover:text-primary/80 transition-all-300">详情</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>
    
    <script>
        // 侧边栏切换
        document.getElementById('sidebarToggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('hidden');
        });
        
        // 导航切换功能
        const navLinks = document.querySelectorAll('nav a');
        const sections = {
            'home': document.getElementById('home-content'),
            'marketplace': document.getElementById('marketplace-content'),
            'customize': document.getElementById('customize-content'),
            'settings': document.getElementById('settings-content'),
            'profile': document.getElementById('profile-content')
        };
        
        navLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有激活状态
                navLinks.forEach(l => l.classList.remove('sidebar-item-active'));
                navLinks.forEach(l => l.classList.add('text-neutral-500', 'hover:bg-neutral-100'));
                
                // 添加当前激活状态
                this.classList.add('sidebar-item-active');
                this.classList.remove('text-neutral-500', 'hover:bg-neutral-100');
                
                // 隐藏所有内容区域
                Object.values(sections).forEach(section => {
                    section.classList.add('hidden');
                });
                
                // 显示对应内容区域
                const targetId = this.getAttribute('href').substring(1);
                if (sections[targetId]) {
                    sections[targetId].classList.remove('hidden');
                }
            });
        });
        
        // 模拟文件上传点击事件
        const fileUploadArea = document.querySelector('div:has(input[type="file"])');
        if (fileUploadArea) {
            fileUploadArea.addEventListener('click', function() {
                this.querySelector('input[type="file"]').click();
            });
        }
        
        // 处理文件选择
        const fileInput = document.querySelector('input[type="file"]');
        if (fileInput) {
            fileInput.addEventListener('change', function() {
                if (this.files.length > 0) {
                    const fileNameDisplay = document.createElement('p');
                    fileNameDisplay.className = 'text-sm text-primary mt-2';
                    fileNameDisplay.textContent = `已选择 ${this.files.length} 个文件`;
                    
                    const uploadArea = this.parentElement;
                    // 移除已有的文件提示
                    const existing提示 = uploadArea.querySelector('p.text-primary');
                    if (existing提示) {
                        uploadArea.removeChild(existing提示);
                    }
                    uploadArea.appendChild(fileNameDisplay);
                }
            });
        }
    </script>
</body>
</html>
